<script lang="ts" setup>
import TitleImg from './TitleImg.vue'
import type {IOrder} from '@/typings/interface'

const {order} = defineProps<{
    order: IOrder
}>()

// 不同订单状态列表tab title
const orderState = computed(() => {
    switch (order.order_state) {
        case 'CANCEL':
            return '已取消'
        case 'NEW':
            return '待付款'
        case 'PAY':
            return '已完成'
    }
})

// 支付按钮
async function confirm() {
    if (order.order_state === 'NEW') {
        /**
         * 去支付
         */
        console.log('去支付');
    }
}
</script>

<template>
    <view bg-white p="3.75">
        <view between p="b-3.75" class="b-b b-#d7d7d7">
            <text text="18 #555555">
                订单号：{{ order.out_trade_no }}
            </text>
            <text text="20 #f38e48">
                {{ orderState }}
            </text>
        </view>
        <TitleImg :order="order"/>
        <view between mt-5>
            <view flex items-center v-show="order.order_state === 'PAY'">
                <text text="24 #7f7f7f">
                    实付:&nbsp;
                </text>
                <text text="28 #ff4439" font-bold>
                    ¥{{ order.pay_amount }}
                </text>
            </view>
            <button v-if="order.order_state === 'NEW'" p="y-0 x4" m-0 text-20 leading-6 rounded-4 bg-red-5 text-white
                    @click="confirm">
                立即支付
            </button>
        </view>
    </view>
</template>
